<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of Blocks</title>
</head>
<body>
<canvas id="physicsCanvas" width="800" height="300" style="border:1px solid #000000;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow
    function drawArrow(fromX, fromY, toX, toY, headLength = 10) {
        const angle = Math.atan2(toY - fromY, toX - fromX);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // Helper function to draw a double-headed arrow
    function drawDoubleArrow(fromX, fromY, toX, toY, headLength = 8) {
        const angle = Math.atan2(toY - fromY, toX - fromX);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        // Arrowhead at 'to'
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        // Arrowhead at 'from'
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(fromX + headLength * Math.cos(angle - Math.PI / 6), fromY + headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(fromX + headLength * Math.cos(angle + Math.PI / 6), fromY + headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Drawing Parameters ---
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    const ySurface = 220;
    const blockW = 50;
    const blockH = 50;
    const yBlock = ySurface - blockH;
    const spacingL = 90;
    const startX = 80;

    // --- Draw Surface ---
    ctx.beginPath();
    ctx.moveTo(10, ySurface);
    ctx.lineTo(790, ySurface);
    ctx.stroke();

    // Draw hatches for the surface
    ctx.lineWidth = 1.5;
    for (let i = 20; i < 790; i += 25) {
        ctx.beginPath();
        ctx.moveTo(i, ySurface);
        ctx.lineTo(i - 15, ySurface + 15);
        ctx.stroke();
    }
    ctx.lineWidth = 2; // Reset line width

    // --- Draw Force F ---
    const yForce = yBlock + blockH / 2;
    drawArrow(startX - 70, yForce, startX, yForce, 12);
    ctx.font = "italic 30px 'Times New Roman'";
    ctx.fillText('F', startX - 85, yForce);

    // --- Draw Blocks and Spacing ---
    ctx.font = "24px 'Times New Roman'";

    // Block 1
    const x1 = startX;
    ctx.strokeRect(x1, yBlock, blockW, blockH);
    ctx.fillText('1', x1 + blockW / 2, yBlock + blockH / 2 + 2);

    // Function to draw dimension 'l'
    function drawDimensionL(blockX) {
        const yDim = yBlock - 30;
        const tickStart = blockX + blockW;
        const tickEnd = tickStart + spacingL;
        
        ctx.beginPath();
        ctx.moveTo(tickStart, yDim - 10);
        ctx.lineTo(tickStart, yDim + 10);
        ctx.moveTo(tickEnd, yDim - 10);
        ctx.lineTo(tickEnd, yDim + 10);
        ctx.stroke();
        
        drawDoubleArrow(tickStart, yDim, tickEnd, yDim);
        
        ctx.font = "italic 24px 'Times New Roman'";
        ctx.fillText('l', (tickStart + tickEnd) / 2, yDim - 12);
    }

    // Spacing between 1 and 2
    drawDimensionL(x1);

    // Block 2
    const x2 = x1 + blockW + spacingL;
    ctx.font = "24px 'Times New Roman'";
    ctx.strokeRect(x2, yBlock, blockW, blockH);
    ctx.fillText('2', x2 + blockW / 2, yBlock + blockH / 2 + 2);

    // Ellipsis (...)
    const xEllipsis = x2 + blockW + 60;
    ctx.font = "bold 30px 'Times New Roman'";
    ctx.fillText('...', xEllipsis, yBlock + blockH / 2);

    // Block 9
    const x9 = xEllipsis + 60;
    ctx.font = "24px 'Times New Roman'";
    ctx.strokeRect(x9, yBlock, blockW, blockH);
    ctx.fillText('9', x9 + blockW / 2, yBlock + blockH / 2 + 2);

    // Spacing between 9 and 10
    drawDimensionL(x9);

    // Block 10
    const x10 = x9 + blockW + spacingL;
    ctx.font = "24px 'Times New Roman'";
    ctx.strokeRect(x10, yBlock, blockW, blockH);
    ctx.fillText('10', x10 + blockW / 2, yBlock + blockH / 2 + 2);

</script>

</body>
</html>